<template>
  <div class="login-container">
    <div class="login-form-container">
      <div class="login-logo">
        <img alt="logo" class="w-50" src="@/assets/images/logo.svg" />
        <span style="font-family: 华文楷体, 楷体, 微软雅黑, serif">{{ title }}</span>
      </div>
      <n-card class="login-form-box">
        <div class="w-full flex flex-items-start justify-between mb-20">
          <div font="size-28px">登录</div>
        </div>
        <n-form ref="formRef" :model="loginInfo" :rules="rules">
          <n-form-item path="name" label="账号">
            <n-input
              v-model:value.trim="loginInfo.name"
              size="large"
              type="text"
              placeholder="请输入账号"
              @keydown.enter="handleLogin"
            />
          </n-form-item>
          <n-form-item path="password" label="密码">
            <n-input
              v-model:value.trim="loginInfo.password"
              size="large"
              type="password"
              placeholder="请输入密码"
              @keydown.enter="handleLogin"
            />
          </n-form-item>
          <div class="flex flex-items-center justify-between">
            <n-checkbox v-model:checked="isRemember">记住用户</n-checkbox>
          </div>
          <n-button size="large" :ghost="false" class="w-full mt-30" type="primary" @click="handleLogin">登 录</n-button>
        </n-form>
        <div class="color-gray w-full text-center mt-10">© 2023 - {{ new Date().getFullYear() }} Evil-Admin</div>
      </n-card>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, unref } from 'vue';
import { useRouter } from 'vue-router';
import { login, userRegister } from '@/api/auth';
import { createLocalStorage } from '@/utils/cache';
import { setToken } from '@/utils/token';
const title = import.meta.env.VITE_APP_TITLE;
const router = useRouter();
const query = unref(router.currentRoute).query;
let nowType = ref('login');
const loginInfo = ref({
  name: 'admin',
  password: '123456',
});
const registerInfo = ref({
  name: '',
  password: '',
});

const ls = createLocalStorage({ prefixKey: 'login_' });
const lsLoginInfo = ls.get('loginInfo');
if (lsLoginInfo) {
  loginInfo.value.name = lsLoginInfo.name || '';
  loginInfo.value.password = lsLoginInfo.password || '';
}

async function handleLogin() {
  const { name, password } = loginInfo.value;
  if (!name || !password) {
    $message.warning('请输入用户名和密码');
    return;
  }
  try {
    $message.loading('正在验证...');
    const res = await login({ name, password: password.toString() });
    if (res.code === 0) {
      $message.success('登录成功');
      ls.set('loginInfo', { name, password });
      setToken(res.data.token);
      if (query.redirect) {
        const path = query.redirect;
        Reflect.deleteProperty(query, 'redirect');
        router.push({ path, query });
      } else {
        router.push('/');
      }
    } else {
      $message.warning(res.message);
    }
  } catch (error) {
    $message.error(error.message);
  }
}
async function handleRegister() {
  const { name, password } = registerInfo.value;
  if (!name || !password) {
    $message.warning('请输入用户名和密码');
    return;
  }
  try {
    $message.loading('正在验证...');
    const res = await userRegister({ name, password: password.toString() });
    if (res.code === 0) {
      $message.success('注册成功');
      nowType.value = 'login';
    } else {
      $message.warning(res.message);
    }
  } catch (error) {
    $message.error(error.message);
  }
}
</script>
<style lang="scss">
.login-container {
  .n-card__content {
    padding: 30px;
  }
}
</style>
<style scoped lang="scss">
.login-container {
  width: 100%;
  height: 100%;
  position: relative;
  background-image: url(@/assets/images/login-bg.svg);
  background-position: left 100px;
  background-size: 600px 100%;
  background-repeat: no-repeat;

  .login-form-container {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: rgba(142, 142, 142, 0.19) 0 6px 15px 0;
    -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0 6px 15px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .login-logo {
      position: absolute;
      left: 20px;
      top: 20px;
      font-size: 22px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .login-form-box {
      width: 475px;
    }
  }
}
</style>
